/*次要部分*/
*{
  margin:0;
  padding:0;
}
ul,li{
list-style-type:none;
}
a{
text-decoration:none;
padding:0px 30px;
color:black;
}
/*主体部分*/
body{
height:100%;
width:100%;
background:#ECECE4;
}
/*顶部*/
#top{
width:100%;
height:50px;
background:white;
opacity:0.8;
position:absolute;
top:0px;
box-shadow:0px 5px 12px #888;
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
}
#top .title{
/*倾斜*/
font-style:oblique;
/*粗体*/
font-weight:bolder;
font-size:20px;
/*"times"、"courier"、"arial"*/
font-family:courier;
line-height:50px;
float:left;
padding:0px 30px;
}
/*右侧导航栏*/
#top .whole{
color:black;
padding-top:60px;
float:right;
position:relative;
top:-50px;
}
/*li-1*/
.whole .father{
display:inline-block;
padding:5px 10px;
position:relative;
/*粗体*/
font-weight:bolder;
font-size:16px;
/*"times"、"courier"、"arial"*/
font-family:courier;
}
/*ul*/
.whole .son{
display:none;
position:absolute;
background:white;
top:30px;
left:10px;
padding:1px 0px;
}
/*li-2*/
.son li{
padding:10px 15px;
}
/*下拉-1*/
.father:hover .son{
display:block;
}
/*下拉-2*/
.son li:hover{
background:grey;
color:white;
}
/*中间*/
#middle{
width:1470px;
height:1200px;
position:absolute;
top:50px;
}
.box1{
width:600px;
height:100px;
border:1px solid black;
background:white;
border-radius:20px;
margin:150px 180px;
box-shadow:5px 5px 12px #888;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
border:0px;
}
.box1 h4{
padding:20px 30px;
}
.box2{
width:600px;
height:800px;
border:1px solid black;
background:white;
border-radius:20px;
margin:-80px 180px;
box-shadow:5px 5px 12px #888;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
border:0px;
}
.text{
padding:60px 30px;
}
#middle .my{
margin:0px 1200px;
position:relative;
left:-350px;
top:-895px;
float:left;
}
.head-portrait{
width:80px;
height:80px;
border-radius:50px;
margin:30px 20px;
}
.name{
position:relative;
top:-60px;
left:120px;
}
.box3{
width:450px;
height:300px;
border:1px solid black;
background:white;
border-radius:20px;
box-shadow:5px 5px 12px #888;
border:0px;
}
.line{
width:450px;
height:0.1px;
border:1px solid black;
position:relative;
top:-25px;
}
#middle table{
position:relative;
top:-10px;
left:70px;
}
#middle td{
width:100px;
height:30px;
text-align:center;
}
button{
width:120px;
background:cyan;
position:relative;
top:10px;
left:170px;
}
.box4{
width:450px;
height:300px;
border:1px solid black;
background:white;
border-radius:20px;
margin-top:60px;
box-shadow:5px 5px 12px #888;
border:0px;
}
#font{
margin:30px 40px;
}
.1{
width:10px;
height:10px;
background:black;
border:1px solid cyan;
position:absolute;
top:100px;
}
#rotate-div{
transform:rotate(10deg)
}
#demo{
background:white;
color:black;
}
.box5{
width:450px;
height:250px;
border:1px solid black;
background:white;
margin-top:60px;
overflow:scroll;
box-shadow:5px 5px 12px #888;
}
